<template>
  <div class="dialog-container">
    <el-dialog
      title="工单流程"
      :visible.sync="dialogVisible"
      custom-class="custom-dialog"
      width="50%"
      :before-close="handleClose"
      @opened="initData"
    >
      <div class="steps-panel of-auto" v-loading="dialogLoading">
        <div class="steps-title" />

        <div class="steps-content">
          <el-steps class="custom-steps" direction="vertical" :active="1">
            <el-step v-for="(item, index) in workOrderFlow" :key="index">
              <template slot="icon">
                <span class="status" :class="index === 0 ? 'color-1' : ''" />
              </template>
              <template slot="title">
                <div class="title">
                  {{ item.flowName }}
                  <img
                    v-show="item.overtime === 0"
                    :src="case1"
                    class="w-60 h-15"
                    alt=""
                  />
                  <img
                    v-show="item.overtime === 1"
                    :src="case1"
                    class="w-60 h-15"
                    alt=""
                  />
                </div>
                <div class="time fs-12">{{ parseTime(item.actualTime) }}</div>
              </template>
              <template slot="description">
                <div class="step-content step_content_style">
                  <div class="step-content-left">
                    <div>办理人：{{ item.userValue }}</div>
                    <div>办理部门：{{ item.deptValue }}</div>
                  </div>
                  <div class="step-content-right">
                    <img
                      :src="case4"
                      alt=""
                      @click="openImageDialog(item.attachments)"
                    />
                  </div>
                </div>
              </template>
            </el-step>
          </el-steps>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import case1 from "@/assets/images/case/case1.png";
import case2 from "@/assets/images/case/case2.png";
import case3 from "@/assets/images/case/case3.png";
import case4 from "@/assets/images/case/case4.png";
import { listFlow } from "@/api/wfm/flow";
import { parseTime } from "@/utils/index";
export default {
  name: "WorkOrderFlowDialog",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    number: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      case1,
      case2,
      case3,
      case4,
      dialogLoading: false,
      workOrderFlow: [],
    };
  },
  created() {},
  mounted() {},
  methods: {
    parseTime,
    initData() {
      const params = {
        number: this.number,
      };
      listFlow(params).then((res) => {
        this.workOrderFlow = res.rows;
      });
    },
    handleClose() {
      this.$emit("closeDialog");
    },
  },
};
</script>

<style lang='scss' scoped>
.step_content_style {
  position: relative;
}
.step_content_style .step-content-right {
  position: absolute;
  right: -1px;
  top: -8px;
  cursor: pointer;
}
</style>
